<template>
  <div class="course-plan">
    开班计划
    <div style="display:flex;">
      <div class="course-table">
        <div class="table table-title">
          <span class="a">开课时间</span>
          <span class="b">课程名称</span>
          <span class="c">讲师</span>
        </div>
        <div class="table table-content">
          <span class="a">190921</span>
          <span class="b">190921</span>
          <span class="c">190921</span>
        </div>
        <div class="table table-content">
          <span class="a">190921</span>
          <span class="b">190921</span>
          <span class="c">190921</span>
        </div>
      </div>
      <div class="course-table">
        <div class="table table-title">
          <span class="a">开课时间</span>
          <span class="b">课程名称</span>
          <span class="c">讲师</span>
        </div>
        <div class="table table-content">
          <span class="a">190921</span>
          <span class="b">190921</span>
          <span class="c">190921</span>
        </div>
        <div class="table table-content">
          <span class="a">190921</span>
          <span class="b">190921</span>
          <span class="c">190921</span>
        </div>
        <div class="table table-content">
          <span class="a">190921</span>
          <span class="b">190921</span>
          <span class="c">190921</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="stylus">
.course-plan {
  margin: 20px auto;
  padding: 40px;
  width: 1200px;
  min-height: 365px;
  background-color: #ffffff;
  font-size: 28px;
  line-height: 40px;
  color: #1b1b1b;

  .course-table {
    width: 540px;

    &:first-child {
      margin-right: 40px;
    }
    .table {
      margin-top: 10px;
      height: 48px;
      font-size: 16px;
      display: flex;

      &:first-child {
        margin-top: 36px;
      }

      & > span {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .a, .c {
        width: 24.25%;
        position: relative;
      }

      .b {
        position: relative;
        width: 51.5%;
      }

      .a:after, .b:after {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        width: 1px;
        height: 38px;
        background-color: #e3a493;
      }
    }

    .table-title {
      background-color: #d2907e;
      color: #ffffff;
    }

    .table-content {
      color: #333333;
      border: solid 2px #e2b8ad;

      .a:after, .b:after {
        background-color: #dcdcdc;
      }
    }
  }
}
</style>
